<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 插值语法 -->
    <div id="app">
        <span v-once>Message:{{ msg }}</span>
        <p>Using mustaches: {{ rawHtml }}</p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        <div v-bind:class="color">test......</div>
        <p>{{ number + 1 }}</p>
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <div v-bind:id="'list-'+id">{{ id }}</div>
        <!-- v-if -->
        <p v-if="seen">你现在看到我了</p>
        <!-- v-bind -->
        <a v-bind:href="url">跳转到字节跳动</a>
        <p>{{ message1 }}</p>
        <p v-on:click="doSomething">中国</p>
        <a v-bind:[href]="url">跳转到百度</a>
        <!-- v-bind缩写形式 -->
        <a :href="url">跳转到腾讯</a>
        <!-- v-on的缩写 -->
        <button @click="doSomething">腾讯</button>
    </div>  
    
</body>
<script type="text/javascript">
    // 插值语法
    var app = new Vue({
        el: "#app",
        data:{
            msg: 'hello Vue',
            rawHtml:'<span style="color:red">This should be red.</span>',
            color: 'blue',
            number: 1,
            ok: 0,
            message:'vue',
            id: 10,
            seen: true,
            url:'https://jobs.bytedance.com/',
            message1: '字节跳动',
            url: 'https://www.baidu.com',
            url:'https://tencent.com'
        },
        methods: {
            doSomething: function(){
                this.message1 = this.message1.split('').reverse().join(''),
                alert("欢迎来到腾讯大家庭")
            }
            
        }
    })
</script>
<style type="text/css">
    .red{
        color: red;
    }
    .blue{
        color: skyblue; 
        font-size: 10px;
    }
</style>
</html>